<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <script src="__STATIC__/js/swiper.min.js"></script>
    <title>领券中心</title>
    <style>
        .tips p {
            text-indent: 4%;
            color: #BFBFBF;
        }

        .wrap-tic .swiper-slide a {
            color: #C6C6C6;
        }

        .swiper-wrapper .swiper-slide.cur {
            border: 1px solid #E73F09;
        }

        .wrap-tic .swiper-slide {
            text-align: center;
            /*margin-left: 5px;*/
            /*margin-bottom: 5px;*/
            font-size: 14px;
            border: 1px solid #C6C6C6;
            line-height: 2;
            border-radius: 4px;
        }

        .wrap-tic .tablist > ul .cur span {
            border-bottom: 1px solid #E73F09;
            padding-bottom: 3px;
        }
    </style>
    <script>
        $(function () {
            $(".down img").click(
                    function () {
                        $('.box').css('height', window.screen.availHeight + 'px');
                        $(".type").toggle();
                        var str = $(this).prop('src'),
                                header = $('.header').height(),
                                tablist = $('.tablist').height(),
                                zhi = str.substring(str.length - 8, str.length);
                        if (zhi == "down.png") {
                            $('.box').css({'display': 'block', 'top': header + tablist + 1});
                            $(this).prop("src", "__STATIC__/img/top31.png");
                            $('.swiper-container').css('display', 'none');
                            $('body').css('overflow-y', 'hidden');
                        } else {
                            $(this).prop("src", "__STATIC__/img/down.png");
                            $('.box').css('display', 'none');
                            $('body').css('overflow-y', '');
                        }

//                        $(".tablist ul li").removeClass("cur");
                        $(".board").css({height: "h"});
                    }
            )
        })
    </script>
    <style>
        .box {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #000;
            opacity: 0.5;
            display: none;
        }

    </style>
    {include file="public/href" /}
</head>
<body>
<div class="wrap-tic">
    <div class="header">
        <p>领券中心</p>
        <img src="__STATIC__/img_user/back.png" class="back"
             onclick=window.location.href="{:url('mobile/user_port/index')}";>
        <img src="__STATIC__/img_user/lj-youhuijuan.png" class="set1" onclick="my_coupon()">
    </div>
    <div class="tab">
        <div class="tablist">

            <div class="swiper-container" style="padding: 0 3%;overflow: hidden;">
                <ul class="swiper-wrapper" style="padding: 5px 0;">
                    <li {eq name="id" value="-1" }class="cur swiper-slide" {else/} class="swiper-slide"{/eq} >
                    <span><a href="{:url('mobile/user_port/get_ticket')}?id=-1">全部</a></span></li>
                    {volist name='type' id='v'}
                    <li {if condition="input('id',-1) eq $v.id" } class="cur swiper-slide" style="overflow: hidden; white-space:nowrap" {else/} style="overflow: hidden; white-space:nowrap" class="swiper-slide" {/if}>
                    <span><a href="{:url('mobile/user_port/get_ticket')}?id={$v.id}">{$v.title}</a></span></li>
                    {/volist}
                </ul>

            </div>


            <script>
                var swiper1 = new Swiper('.tablist .swiper-container', {
                    slidesPerView: 4,
                    paginationClickable: true,
                    spaceBetween: 10,
                    freeMode: true
                });
            </script>

        </div>
        <!--头部分类结束-->
    <div class="tabcon">
        <div class="cur">
            <!--平台优惠券内容容器-->
            <ul class="list" id="list">
            </ul>
        </div>
    </div>
    <div class="board"></div>
</div>

</div>
<div class="box" onclick="close_box()"></div>
{include file="public/src" /}
<script>
    //关闭遮罩层
    function close_box(){
        $("#style_img").prop("src","__STATIC__/img/down.png");
        $('.box').css('display','none');
        $('body').css('overflow-y','');
        $(".type").toggle();
    }
    //跳转到我的优惠券
    function my_coupon(){
        if ('{$Think.session.member_id}'){
            window.location.href="{:url('mobile/user_info/my_coupon_index')}?act=index";
        }else{
            layer.open({
                content: '您还未登录'
                , btn: ['去登录', '取消']
                , yes: function (index) {
                    window.location.href = "{:url('mobile/user_port/login')}";
                    layer.close(index);
                }
            });
        }
    }
    //layer流加载
    layui.use('flow', function () {
        var $ = layui.jquery;
        var flow = layui.flow;
        flow.load({
            elem: '#list' //流加载容器
            , isAuto: true
            , isLazyimg: true
            , done: function (page, next) { //执行下一页的回调
                var lis = [];
                var shop_id = $('#shop_id').val();

                $.ajax({
                    url: "{:url('mobile/user_port/get_ticket')}",
                    dataType: 'json',
                    type: 'post',
                    data: {'page': page, 'shop_id': shop_id, 'id': "{:input('id')}"},
                    success: function (t) {
                        layui.each(t.data, function (index, item) {
                            var is_get = '';
                            if (item.member_coupon.length == 0) {
                                is_get = "content";
                            } else {
                                is_get = "main";
                            }
                            lis.push('<div class="center"><div class="' + is_get + '">' +
                                    '<div class="left"><p class="price">&yen;<span> ' + item.actual_price + '.00</span></p></div>' +
                                    '<div class="right"><div onclick="jump_get(this,' + item.id + ')"><p class="dress">' + item.title + '</p><p class="num" >剩余<font id="num_' + item.id + '">' + item.number + '</font>张</p></div>' +
                                    '<p class="use"><span>消费满' + item.virtual_price + '.00元使用 </span>' +
                                    '<img src="__STATIC__/img_user/down1.png" id="img_' + item.id + '" onclick="up_down(' + item.id + ')"></p></div>' +
                                    '</div><div class="tips" id="tips_' + item.id + '" style="display: none" ><p>' + item.content + '</p></div></div>');
                        });
                        next(lis.join(''), page < t.pages);
                    },
                    error: function () {
                        layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                    }
                })
            }
        });
    });

    //优惠券详情
    function up_down(id) {
        var $_this = $('#img_' + id);
        var url = $_this.prop('src');
        if (url.substr(url.length - 9) == "top31.png") {
            $_this.attr("src", "__STATIC__/img_user/down1.png")
            $('#tips_' + id).css({display: "none"})
        } else {
            $_this.attr("src", "__STATIC__/img_user/top31.png")
            $('#tips_' + id).css({display: "block"})
        }
    }

    //领取优惠券
    function jump_get(o, id) {
        var status = $(o).parent('div').parent('div').attr('class');
        if (status == 'main') {
            layer.open({content: '此优惠券已领取', skin: 'msg', time: 2});
            return false;
        }
        var num = parseInt($('#num_' + id).text());
        if (num <= 0) {
            layer.open({content: '数量已空,无法领取', skin: 'msg', time: 2});
            return false;
        }
        if (!'{$Think.session.member_id}'){
            layer.open({
                content: '您还未登录'
                , btn: ['去登录', '取消']
                , yes: function (index) {
                    window.location.href = "{:url('mobile/user_port/login')}";
                    layer.close(index);
                }
            });
        }else{
            $.ajax({
                url: "ticket_act",
                dataType: 'json',
                type: 'post',
                data: {'id': id},
                success: function (t) {
                    if (t.code == 200) {
                        layer.open({content: t.message, skin: 'msg', time: 2});
                        $(o).parent('div').parent('div').attr('class', 'main');
                        $('#num_' + id).text(num - 1);
                    } else {
                        layer.open({content: t.message, skin: 'msg', time: 2});
                    }
                },
                error: function () {
                    layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                }
            })
        }

    }
</script>
</body>
</html>